<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单列表 - 餐厅管理系统</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Microsoft YaHei', Arial, sans-serif; background: #f5f5f5; }
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .header { background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%); color: white; padding: 30px; border-radius: 10px; margin-bottom: 30px; }
        .header h1 { font-size: 32px; margin-bottom: 10px; }
        .nav { background: white; padding: 15px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .nav a { text-decoration: none; color: #667eea; margin-right: 20px; font-weight: 500; }
        .nav a:hover { color: #764ba2; }
        .action-bar { display: flex; justify-content: space-between; align-items: center; background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
        .btn { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; text-decoration: none; display: inline-block; font-size: 14px; transition: all 0.3s; }
        .btn-primary { background: #ed8936; color: white; }
        .btn-primary:hover { background: #dd6b20; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(237,137,54,0.3); }
        .btn-info { background: #4299e1; color: white; }
        .btn-info:hover { background: #3182ce; }
        .btn-warning { background: #f6ad55; color: white; }
        .btn-warning:hover { background: #ed8936; }
        .btn-danger { background: #fc8181; color: white; }
        .btn-danger:hover { background: #f56565; }
        table { width: 100%; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        th { background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%); color: white; padding: 15px; text-align: left; }
        td { padding: 15px; border-bottom: 1px solid #eee; }
        tr:hover { background: #f9f9f9; }
        .empty { text-align: center; padding: 60px; color: #999; font-size: 18px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>📋 餐厅管理系统</h1>
            <p>订单管理模块</p>
        </div>

        <div class="nav">
            <a th:href="@{/}">🏠 首页</a>
            <a th:href="@{/customers/list}">👥 顾客管理</a>
            <a th:href="@{/menuitems/list}">🍜 菜单管理</a>
            <a th:href="@{/orders/list}">📋 订单管理</a>
            <a th:href="@{/orderdetails/list}">📝 订单详情</a>
        </div>

        <div class="action-bar">
            <h2 style="color: #333;">订单列表</h2>
            <a th:href="@{/orders/add}" class="btn btn-primary">➕ 创建订单</a>
        </div>

        <!-- 错误提示 -->
        <div th:if="${error}" style="background: #fee; border: 2px solid #f88; padding: 15px; border-radius: 8px; margin-bottom: 20px; color: #c00; text-align: center;">
            <strong>⚠️ 错误：</strong> <span th:text="${error}"></span>
        </div>

        <table th:if="${orders != null and !orders.isEmpty()}">
            <thead>
                <tr>
                    <th>订单ID</th>
                    <th>顾客ID</th>
                    <th>订单日期</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="order : ${orders}">
                    <td th:text="${order.id}"></td>
                    <td th:text="${order.customerId}"></td>
                    <td th:text="${order.orderDate != null ? #dates.format(order.orderDate, 'yyyy-MM-dd HH:mm:ss') : '无日期'}"></td>
                    <td>
                        <a th:href="@{/orders/detail/{id}(id=${order.id})}" class="btn btn-info">👁️ 查看</a>
                        <a th:href="@{/orders/edit/{id}(id=${order.id})}" class="btn btn-warning">✏️ 编辑</a>
                        <a th:href="@{/orders/delete/{id}(id=${order.id})}" class="btn btn-danger" onclick="return confirm('确定要删除该订单吗？')">🗑️ 删除</a>
                    </td>
                </tr>
            </tbody>
        </table>

        <div class="empty" th:if="${orders == null or orders.isEmpty()}">
            <p>😢 暂无订单数据</p>
            <p style="margin-top: 20px;"><a th:href="@{/orders/add}" class="btn btn-primary">立即创建</a></p>
        </div>
    </div>
</body>
</html>
